<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="static/js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="static/css/chat.css">
    <script>
        function init(){
            $.post("chat/user",{
                loginName:'${user.loginName!}'
            },function(data){
                console.log(data);
            });
        }

    </script>
</head>
<body>

<div style="margin:20px;padding:20px;width:200px;height:200px; background:#ffccff;" contenteditable="true"></div>
<h1>${user.loginName!}</h1>
<!-- 好友窗体 start -->
<div class="chat-main" id="chat-main">
    <div class="c-head">1</div>
    <div class="c-body">
        <div class="c-body-head">
            <ul>
                <li>消息</li>
                <li>联系人</li>
            </ul>
        </div>
        <div class="c-body-msg"></div>
        <div class="c-body-contact">
            <div class="contact-head">
                <div>
                    <ul class="contact-head-ul">
                        <li>好友</li>
                        <li>群聊</li>
                    </ul>
                </div>
                <div class="contact-friend">
                    <ul>
                        <li userid="1000" ondblclick="chat.ChatWin.newChatWin(this);">张三</li>
                        <li userid="2000" ondblclick="chat.ChatWin.newChatWin(this);">李四</li>
                    </ul>
                </div>
                <div class="contact-group-chat"></div>
            </div>
        </div>
    </div>
    <div class="c-foot"></div>
</div>
<!-- 好友窗体 end-->


<script src="static/js/chat.js"></script>

<script>
    function init(){
        // 真正移动的目标对象
        var moveTarget = $("#chat-main")[0];
        // 要拖拽的元素
        var dragElement = $("#chat-main").find("div[class='c-head']")[0];
        chat.ChatUtils.drag(dragElement,moveTarget);

    }
    //init();
    //mouseover
    document.addEventListener("click", function(e){
        console.log($($(e).attr("srcElement")).attr("class"));
        // 聊天窗体
        if($($(e).attr("srcElement")).attr("class")=="chat-head-title"){
            var dragElement=$(e).attr("srcElement");
            var moveTarget=$($(e).attr("srcElement")).parents("div[class='chat-container']")[0];
            chat.ChatUtils.drag(dragElement,moveTarget);
        }
        // 好友列表窗体
        if($($(e).attr("srcElement")).attr("class")=="c-head"){
            var dragElement=$(e).attr("srcElement");
            var moveTarget=$($(e).attr("srcElement")).parents("div[class='chat-main']")[0];
            chat.ChatUtils.drag(dragElement,moveTarget);
        }
    });

    chat.ChatWebSocket.init();



</script>
</body>

</html>